<template>
	<view class="addr">
		<view class="list">
			<view class="ul" v-for="item in addrs" :key="item.id">
				<view class="li" @touchstart.prevent="starts(item)" @touchend="ends(item.id)" @touchmove="clear()">
					<view class="icon">
						<u-icon name="map" color="#ff772d" size="28"></u-icon>
					</view>
					<view class="deta">
						<view class="user">
							<text>{{item.name}}</text>
							<text>{{item.phone}}</text>
						</view>
						<view class="ar">
							{{item.addr}}
						</view>
					</view>
				</view>
				<view class="default">
					<u-radio-group @change="def(item.id)" v-model="item.isShow">
						<u-radio activeColor="#fd852a" size="16px" label-size="12px" label="默认收货地址"></u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<view v-if="addrs.length==0">
			<u-empty text="暂无地址，请添加地址信息" mode="address" icon="http://cdn.uviewui.com/uview/empty/address.png"></u-empty>
		</view>
		<view class="fool">
			<view class="add">
				<u-button @click="go2Add()" shape="circle">新增收货地址</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions,mapState } from 'vuex';
	export default {
		data() {
			return {
				isDel : 0,// 当定时器的存储变量直接为某个值
			}
		},
		onLoad() {
			console.log(this.addrs);
		},
		computed:{
			...mapState('addr',['addrs'])
		},
		methods: {
			...mapActions('addr',['actionAddrs','actionUpdate','actionRemove']),
			def(id){
				console.log(id);
				this.addrs.forEach((item)=>{
					if(id == item.id){
						item.isShow =true;
						console.log(item.isShow);
						this.actionUpdate(item);
						console.log(item);
					}else{
						item.isShow =false;
					}
				})
			},
			go2Add(){
				uni.navigateTo({
					url:'/pages/addr/addr'
				})
			},
			// 开始触发定时器：800毫秒后执行删除
			starts(item){
				this.isDel =setTimeout(()=>{
					this.LongTapDel(item);
				},800);
				return false;
			},
			// 长按删除
			LongTapDel(item){
				// 重置定时器
				clearTimeout(this.isDel);
				this.isDel =0;	// 后期想要对定时器进行判断的话，那么重置为某个值更好操作
				// 弹窗显示 uni.showModal
				uni.showModal({
					title:'提示',
					content:'是否删除当前岗位',
					success:(res)=>{
						if(res.confirm){
							this.actionRemove(item)
							uni.showToast({title:'删除成功'})
						}else if(res.cancel){
							uni.showToast({
								icon:"none",
								title:'已取消'
							})
						}
					}
				})
			},
			// 手指离开屏幕时，先判断定时器确认为空后跳转到详情页
			ends(id){
				// 没有坚持到800毫秒
				clearTimeout(this.isDel);
				return false;
			},
			// 移动
			clear(){
				clearTimeout(this.isDel);
				this.isDel =0;
			},
		}
	}
</script>

<style>
.addr{
	width: 100%;
	background-color: #f8f8f8;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.list{
	width: 100%;
	padding-bottom: 50px;
}
.addr .ul{
	width: 96%;
	margin: 10px auto;
	background-color: white;
	border-radius: 6px;
	padding-top: 5px;
	padding-bottom: 10px;
	box-shadow: 0 0 2px #e3e3e3;
}
.ul .li{
	width: 98%;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.li .icon{
	width: 10%;
}
.li .deta{
	width: 88%;
}
.li .deta .user{
	width: 100%;
	font-size: 15px;
	display: flex;
	align-items: center;
}
.li .deta .user text:nth-child(1){
	width: 70%;
	font-size: 16px;
}
.li .deta .user text:nth-child(2){
	width: 30%;
}
.li .deta .ar{
	width: 100%;
	margin-top: 4px;
	font-size: 14px;
	color: #868686;
	overflow: hidden;
	word-wrap: break-word;
}
.ul .default{
	width: 94%;
	margin: 0 auto;
	margin-top: 15px;
}
.addr .fool{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: fixed;
	bottom: 2px;
	background-color: white;
}
.addr .add{
	width: 90%;
}
.addr .fool .add .u-button{
	background-color:  #f56c6c;
	color: white;
}
</style>
